<!--
 * @Descripttion: 编辑轮播图
 * @Author: xiao li
 * @Date: 2020-09-30 10:32:19
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:26:13
-->
<template>
  <div class="lb-ordering-editPrint">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="page-main">
      <div style="height: 40px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
        class="basic-form"
      >
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="subForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * 400</lb-tool-tips>
        </el-form-item>
        <el-form-item label="所属分类" prop="cate_id">
          <el-cascader
            v-model="subForm.cate_id"
            :options="options"
            :props="{ checkStrictly: false, label: 'title', value: 'id' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      options: {},
      subForm: {
        id: 0,
        modular_id: 0,
        cover: '',
        cate_id: 0,
        top: 0,
        status: 1
      },
      subFormRules: {
        cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        cate_id: {
          required: true,
          type: 'array',
          message: '请选择分类',
          trigger: 'change'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        }
      }
    }
  },
  async created () {
    let { modular_id: mid, id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.WebsiteOfferBannerEdit' : 'menu.WebsiteOfferBannerAdd')
    this.subForm.modular_id = mid
    this.getSelectOptions()
    if (id) {
      this.subForm.id = id
      await this.getDetail()
    }
  },
  methods: {
    /**
     * @method 获取分类下拉框的值
     */
    getSelectOptions () {
      let { modular_id: mid } = this.subForm
      this.$api.websiteStarOneCateSelect({ modular_id: mid }).then(res => {
        if (res.code === 200) {
          this.options = res.data
        }
      })
    },
    /**
     * @method 获取封面图
     */
    getCover (img) {
      this.subForm.cover = img
    },
    /**
     * @method: 获取轮播图详情
     */
    async getDetail () {
      let { id } = this.subForm
      let { code, data } = await this.$api.websiteStarBannerInfo({ id })
      if (code !== 200) return
      data.cover = [{ url: data.cover }]
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    async submitFormInfo () {
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      let formArr = ['subForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        subForm.cover = subForm.cover[0].url
        let methodModel = subForm.id ? 'websiteStarBannerUpdate' : 'websiteStarBannerAdd'
        let { code } = await this.$api[methodModel](subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
        this.$router.back(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-ordering-editPrint {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader {
    width: 300px;
  }
}
</style>
